Client-Side Accessibility

1. Menu Structure
2. Embedded Scripts
3. Rollover Effects
4. User Interaction
5. Scripts in Links
6. Drop-Down Menus
7. Dialogs and Errors
8. More Things to Watch...

Example: Bad Menu

<link href="menu.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="menu.js"></script>
<noscript>
  <p>YOUR BROWSER DOES NOT SUPPORT JAVASCRIPT!!!</p>
</noscript>
<div onmouseover="over(1)" onmouseout="out(1)" class="menu"><span id="menu1" class="menu">Books</span>
  <div id="level2-1" class="submenu">
    <div class="item"><a href="javascript:page(1);" class="item">Crime</a></div>
    <div class="item"><a href="javascript:page(2);" class="item">Comedy</a></div>
    <div class="item"><a href="javascript:page(3);" class="item">Fiction</a></div>
  </div>
</div>
<div onmouseover="over(2)" onmouseout="out(2)" class="menu"><span id="menu2" class="menu">Films</span>
  <div id="level2-2" class="submenu">
    <div class="item"><a href="javascript:page(4);" class="item">Action</a></div>
    <div class="item"><a href="javascript:page(5);" class="item">Romance</a></div>
    <div class="item"><a href="javascript:page(6);" class="item">Classic</a></div>
  </div>
</div>
<div onmouseover="over(3)" onmouseout="out(3)" class="menu"><span id="menu3" class="menu">Music</span>
  <div id="level2-3" class="submenu">
    <div class="item"><a href="javascript:page(7);" class="item">Pop</a></div>
    <div class="item"><a href="javascript:page(8);" class="item">Rock</a></div>
    <div class="item"><a href="javascript:page(9);" class="item">Rap</a></div>
  </div>
</div>
<div onmouseover="over(4)" onmouseout="out(4)" class="menu"><span id="menu4" class="menu">Games</span>
  <div id="level2-4" class="submenu">
    <div class="item"><a href="javascript:page(10);" class="item">Adventure</a></div>
    <div class="item"><a href="javascript:page(11);" class="item">Fantasy</a></div>
    <div class="item"><a href="javascript:page(12);" class="item">Arcade</a></div>
  </div>
</div>

Non-existent Menu Structure

Guideline 13: Provide clear navigation mechanisms - Failed

  ...
  <div ...>Books
    <div ...>
      <div><a href="page1.html" ...>Crime</a></div>
      <div><a href="page2.html" ...>Comedy</a></div>
      <div><a href="page3.html" ...>Fiction</a></div>
    </div>
  </div>
  ...

Correct Menu Structure

Guideline 13: Provide clear navigation mechanisms - Passed

• Books
  • Crime
  • Comedy
  • Fiction

  ...
  <li ...>Books
    <ul ...>
      <li><a href="page1.html" ...>Crime</a></li>
      <li><a href="page2.html" ...>Comedy</a></li>
      <li><a href="page3.html" ...>Fiction</a></li>
    </ul>
  </li>
  ...

No Equivalent Alternative

Guideline 6: Ensure that pages featuring new technologies transform gracefully - Failed

YOUR BROWSER DOES NOT SUPPORT JAVASCRIPT!!!

  ...
  <script language="JavaScript" type="text/javascript">
    ...
  </script>
  ...
  <noscript>
    <p>YOUR BROWSER DOES NOT SUPPORT JAVASCRIPT!!!</p>
  </noscript>
  ...

Fallback Alternative

Guideline 6: Ensure that pages featuring new technologies transform gracefully - Passed

• Books
  • Crime
  • Comedy
  • Fiction

  ...
  <script language="JavaScript" type="text/javascript">
    ...
  </script>
  ...
  <noscript>
    ...
    <link href="noscript.css" rel="stylesheet" type="text/css" />
    ...
  </noscript>
  ...

Script-Based Rollovers

Guideline 3: Use markup and style sheets and do so properly - Failed

  ...
  <a href="page1.html" onMouseOut="out(1)"
                       onMouseOver="over(1)" ...>Crime</a>
  ...

CSS-Based Rollovers

Guideline 3: Use markup and style sheets and do so properly - Passed

• Books

  ...
  <style type="text/css">
    ...
    a:hover { ... }
    ...
  </style>
  ...
  <a href="page3.html" ...>Fiction</a>
  ...

Mouse-Based Interaction

Guideline 9: Design for device-independence - Failed

  ...
  <a href="page1.html" onMouseOut="out(1)"
                       onMouseOver="over(1)" ...>Crime</a>
  ...

Mouse and Keyboard Interaction

Guideline 9: Design for device-independence - Passed

• Books
  • Crime
  • Comedy
  • Fiction

  ...
  <a href="page3.html" onBlur="out(3)"
                       onFocus="over(3)"
                       onMouseOut="out(3)"
                       onMouseOver="over(3)" ...>Fiction</a>
  ...

JavaScripts as Links

Guideline 1: Provide equivalent alternatives to auditory and visual content - Failed

  ...
  <a href="JavaScript:myFunction();" ...>Function</a>
  ...

JavaScript if Available

Guideline 1: Provide equivalent alternatives to auditory and visual content - Passed

  ...
  <a href="alternative.html"
        onclick="myFunction(); return False;" ...>Function</a>
  ...

Example: Good Menu

• Books
  • Crime
  • Comedy
  • Fiction
• Films
  • Action
  • Romance
  • Classic
• Music
  • Pop
  • Rock
  • Rap
• Games
  • Adventure
  • Fantasy
  • Arcade

<link href="menu.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="menu.js"></script>
<noscript>
  <link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>
<ul class="menu">
  <li onmouseover="over(1)" onmouseout="out(1)" class="menu">
    <a href="menu.html" onfocus="keys(1)" onclick="return false;" class="menu">Books</a>
    <ul id="level2-1" class="submenu">
      <li class="submenu"><a href="page1.html" class="item">Crime</a></li>
      <li class="submenu"><a href="page2.html" class="item">Comedy</a></li>
      <li class="submenu"><a href="page3.html" class="item">Fiction</a></li>
    </ul>
  </li>
  <li onmouseover="over(2)" onmouseout="out(2)" class="menu">
    <a href="menu.html" onfocus="keys(2)" onclick="return false;" class="menu">Films</a>
    <ul id="level2-2" class="submenu">
      <li class="submenu"><a href="page4.html" class="item">Action</a></li>
      <li class="submenu"><a href="page5.html" class="item">Romance</a></li>
      <li class="submenu"><a href="page6.html" class="item">Classic</a></li>
    </ul>
  </li>
  <li onmouseover="over(3)" onmouseout="out(3)" class="menu">
    <a href="menu.html" onfocus="keys(3)" onclick="return false;" class="menu">Music</a>
    <ul id="level2-3" class="submenu">
      <li class="submenu"><a href="page7.html" class="item">Pop</a></li>
      <li class="submenu"><a href="page8.html" class="item">Rock</a></li>
      <li class="submenu"><a href="page9.html" class="item">Rap</a></li>
    </ul>
  </li>
  <li onmouseover="over(4)" onmouseout="out(4)" class="menu">
    <a href="menu.html" onfocus="keys(4)" onclick="return false;" class="menu">Games</a>
    <ul id="level2-4" class="submenu">
      <li class="submenu"><a href="page10.html" class="item">Adventure</a></li>
      <li class="submenu"><a href="page11.html" class="item">Fantasy</a></li>
      <li class="submenu"><a href="page12.html" class="item">Arcade</a></li>
    </ul>
  </li>
</ul>

OnChange Drop-Down Menu

Guideline 12: Provide context and orientation information - Failed

  ...
  <select name="Books" onChange="jump()">
    <option value="Crime">Crime</option>
    <option value="Comdey">Comedy</option>
    <option value="Fiction">Fiction</option>
  </select>
  ...

OnSubmit Drop-Down Menu

Guideline 12: Provide context and orientation information - Passed

  ...
  <select name="Books" onSubmit="check()">
    <option value="Crime">Crime</option>
    <option value="Comedy">Comedy</option>
    <option value="Fiction">Fiction</option>
  </select>
  <input type="Image" src="submit.png" alt="Submit Selection">
  ...

Color Based Dialogs

Guideline 2: Don't rely on color alone - Failed

Values in red are required

  ...
  <p class="red">Values in red are required</p>
  ...

Clear Dialogs

Guideline 2: Don't rely on color alone - Passed

Values marked with * are required

  ...
  <p class="red">Values marked with * are required</p>
  ...

More Things To Watch...

Pop-up windows or spawning new windows without informing the user

Guideline 12: Provide context and orientation information

Client-Side redirection (using META or JavaScript)

Guideline 7: Ensure user control of time-sensitive content changes

Embedded objects (Applets, ActiveX, ...) are not accessible

Guideline 8: Ensure direct accessibility of embedded user interfaces

Server-Side Accessibility

1. Redundant Logic
2. Markup Generator
3. Database Model
4. Error Messages

Redundant Logic

Examples

1. A server-side script checks the form values even though it is redundant to a client-side script

2. Server-side session tracking is implemented even though it is redundant to the present cookies support

Rationale

Relying on certain browser functionality limits the compatibility of the application

Markup Generation

Example

1. Table headers are inserted manually because the content management system generates broken table markup

2. Scripts editor of the content authoring tool is not used because it produces inaccessible script code

3. Configurations and templates are adjusted to compensate for the behaviour of the content management system

Rationale

Content authoring tools are required to generate valid markup and accessible content

Related Guidelines

Authoring Tools Accessibility Guidelines (ATAG) 1.0

Database Model

Example

1. The alternate text and long description for an image are stored in the database along with the image itself

2. A Database model is extended to include the table header, description as well as summary information

Rationale

In order to make a user interface accessible the database has to be designed appropriately

Related Guidelines

XML Accessibility Guidelines (XAG)

Error Messages

Example

1. Error messages are modified to include navigation elements to direct the users back to the content

2. Standard dialogs are stripped from codes and technical terms so that they are easier to understand

Rationale

Error message dialogs are part of the application and also need to be accessible

Summary

• Provide navigational structure
• Implement script alternatives
• Design for device independence
• Promote orientation and context
• Be sure to generate valid markup
• Beware of dialogs and messages
• Model an accessible database

Related Resources

Client-side accessibility features

• Techniques for Web Content Accessibility Guidelines 1.0
• Curriculum for Web Content Accessibility Guidelines 1.0
• Evaluation, Repair, and Transformation Tools for Web Content Accessibility

Server-side accessibility features

• Authoring Tools Accessibility Guidelines (ATAG) 1.0
• XML Accessibility Guidelines (XAG)